<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页页面</title>

    <style>
        .aa{
            float: right;
        }
    </style>

</head>
<body>

<table width="80%">
<!--  1.黑马程序员  -->
    <tr >
    <td>  <table width="100%">
        <tr>
            <td> <img src="img/logo2.png"></td>
            <td> <img src="img/header.png"></td>
            <td >
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </td>

        </tr>
    </table></td>
    </tr>
<!--    2.首页导航栏-->
    <tr bgcolor="black" >

        <td  height="50px">
            <a href="#"  ><font color="white">首页</font></a>
            <a href="#"><font color="white">手机数码</font></a>
            <a href="#"><font color="white">电脑办公</font></a>
            <a href="#"><font color="white">电脑办公</font></a>
            <a href="#"><font color="white">电脑办公</font></a>
            <a href="#" class="aa"><font color="white">搜索框</font></a>
        </td>


    </tr>
<!--    3.大图-->
    <tr>
        <td>
            <img src="img/bartlesvillecf.jpg">
        </td>
    </tr>
<!--    4.各类商品-->
    <tr>


        <td>
            <table  width="100%">

                <tr><td>热门商品<img src="img/title2.jpg"></td></tr>
                <tr align="center">
                    <td rowspan="2"><img src="hao/big01.jpg"> </td>
                    <td colspan="3"> <img src="hao/middle01.jpg"></td>
                   
                    <td>
                        <img src="hao/small03.jpg">
                    <p >火锅</p>
                    <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td><img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p></td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p></td>
                </tr>

                <tr align="center">
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                </tr>
            </table>
        </td>


    </tr>
<!--    5.一张长图-->
    <tr >
        <td>
            <img src="hao/ad.jpg" width="100%">
        </td>
    </tr>
<!--    6.与4同-->
    <tr>


        <td>
            <table  width="100%">

                <tr><td>热门商品<img src="img/title2.jpg"></td></tr>
                <tr align="center">
                    <td rowspan="2"><img src="hao/big01.jpg"> </td>
                    <td colspan="3"> <img src="hao/middle01.jpg"></td>

                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td><img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p></td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p></td>
                </tr>

                <tr align="center">
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                    <td>
                        <img src="hao/small03.jpg">
                        <p >火锅</p>
                        <p ><font color="red" >￥299.00</font></p>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
<!--    7.一张长图-->
    <tr>
        <td>
            <img src="img/footer.jpg" width="100%">
        </td>
    </tr>
<!--    8.关用我们-->

    <tr>
        <td align="center">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">招贤纳士</a>
            <a href="#">法律声明</a>
            <a href="#">友情链接</a>
            <a href="#">支付方式</a>
            <a href="#">配送方式</a>
            <a href="#">服务声明</a>
            <a href="#">广告声明</a>
             <br/>
            Copyright © 2005-2016 传智商城 版权所有
        </td>
    </tr>
</table>

</body>
</html>